import React from "react";
import { formatMessage } from 'umi-plugin-react/locale';
import { Row, Col, Button, Divider, Spin, message, Tabs } from "antd";
import { webSettingInfo, saveWebSetting } from "@/services/geographic";
import LeftAppearance from "./leftAppearance";
import RightAppearance from "./rightAppearance";
import styles from "./styles.less";
import { fetchWebCommonInfo } from "@/services/robotManagement";

const { TabPane } = Tabs;
class AppearanceSettings extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			loading: false,
			info: {},
			currentTab: "1",
			saving: false,
		};
	}

	componentDidMount() {
		if (this.props.onRef) {
			this.props.onRef(this);
		}
		this.getInfo();
	}

	getInfo = () => {
		this.setState({ loading: true }, async () => {
			const { applicationId } = this.props;
			const res = await fetchWebCommonInfo({ applicationId })
			if (!res.winLogo) {
				res.winLogo = "/robotConfigImg/robot.png";
			}
			if (!res.headPath) {
				res.headPath = "/robotConfigImg/robot.png";
			}
			if (!res.userHeadImg) {
				res.userHeadImg = "/robotConfigImg/user.png";
			}
			if (!res.entranceH5Img || res.entranceH5Img == "/robotConfigImg/robot.png") {
				res.entranceH5Img = "/robotConfigImg/kefu.png";
			}
			if (!res.entranceWebImg || res.entranceWebImg == "/robotConfigImg/robot.png") {
				res.entranceWebImg = "/robotConfigImg/kefu.png";
			}
			if (!res.rightMessage) {
				res.rightMessage = "";
			}
			if (!res.kefuHeadImg || res.kefuHeadImg == "/robotConfigImg/kefu.png") {
				res.kefuHeadImg = "/robotConfigImg/kefuHead.png"
			}
			if (!res.loginLogo) {
				res.loginLogo = "/robotConfigImg/customLoginLogo.png";
			}
			this.setState({ info: res, loading: false }, () => {
				this.LeftAppearance.initData(res);
				if (this.props.isllmCustom != 1) {
					this.RightAppearance.initData(res);
				}
			});
		});
	};

	doSave = async () => {
		const { applicationId, isllmCustom } = this.props;
		const { info, currentTab } = this.state;
		//网站接入设置左侧数据
		const leftFormInfo = this.LeftAppearance.getFormData();
		const leftOtherInfo = this.LeftAppearance.state;

		let obj1 = {
			webWinColor: leftOtherInfo.webWinColor,
			winLogo: leftOtherInfo.winLogo,
			solveFlag: leftFormInfo.solveFlag,
			isSimilar: leftFormInfo.isSimilar,
			sideShow: leftFormInfo.sideShow,
			bubbleStyle: leftFormInfo.style,
			headPath: leftOtherInfo.headPath,
			userHeadImg: leftOtherInfo.userHeadImg,
			rightMessage: leftFormInfo.rightMessage,
			kefuHeadImg: leftOtherInfo.kefuHeadImg,
			voiceEnable: leftFormInfo.voiceEnable,
			winSize: leftFormInfo.winSize,
			winTitle: leftFormInfo.winTitle,
			winColor: leftOtherInfo.winColor,
			loginLogo: leftOtherInfo.loginLogo,
			loginHeadline: leftFormInfo.loginHeadline,
			loginSubtitle: leftFormInfo.loginSubtitle,
			loginDescription: leftFormInfo.loginDescription
		};

		const rightInfo = isllmCustom == 1 ? null : this.RightAppearance.state;
		this.state.saving = true;
		let obj2 = {
			showFlag: rightInfo?.showFlag,
			entranceFlag: rightInfo?.entranceFlag,
			entranceH5Img: rightInfo?.entranceH5Img,
			entranceWebSeat: rightInfo?.entranceWebSeat,
			entranceH5Seat: rightInfo?.entranceH5Seat,
			iconBottomColor: rightInfo?.iconBottomColor,
			entranceWebImg: rightInfo?.entranceWebImg,
		};

		const res = await saveWebSetting({ ...obj1, ...obj2, applicationId, id: info.id });
		message.info(res.message);
		this.setState({ saving: false });
	};

	render() {
		const { loading, info, currentTab, saving } = this.state;
		const { applicationId, channel, isllmCustom, loginType } = this.props;
		return (
			<div className={styles.appearance}>
				<span className={styles.titlep} style={{ background: "unset", padding: "0 10px" }}>
					<span>{formatMessage({ id: 'appearanceSettings.generalAppearance' })}</span>
				</span>
				<LeftAppearance
					applicationId={applicationId}
					onRef={(ref) => (this.LeftAppearance = ref)}
					channel={channel}
					isllmCustom={isllmCustom}
					loginType={loginType}
				/>
				{isllmCustom == 1 ? null : (
					<>
						<span className={styles.titlep} style={{ background: "unset", padding: "0 10px" }}>
							<span>{formatMessage({ id: 'appearanceSettings.codeAccessAppearance' })}</span>
						</span>
						<RightAppearance onRef={(ref) => (this.RightAppearance = ref)} />
					</>
				)}

				<Row>
					<Col span={3} style={{ textAlign: "right" }}>
						<Button
							type='primary'
							loading={saving}
							htmlType='submit'
							onClick={this.doSave}>
							{formatMessage({ id: 'appearanceSettings.save' })}
						</Button>
					</Col>
				</Row>
			</div>
		);
	}
}

export default AppearanceSettings;
